'use client';

import { ReactNode } from 'react';
import { useAuth } from '@/hooks/use-auth';
import { UserRole } from '@/types';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { useRouter } from 'next/navigation';
import { Sidebar } from './sidebar';
import Link from 'next/link';
import { AdminNav } from './admin-nav';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { user, logout } = useAuth();
  const router = useRouter();

  const getNavItems = () => {
    switch (user?.role) {
      case UserRole.PARENT:
        return [
          { label: '子女信息', href: '/parent/children' },
          { label: '交流留言', href: '/parent/messages' },
          { label: '通知公告', href: '/parent/notices' },
        ];
      case UserRole.TEACHER:
        return [
          { label: '学生管理', href: '/teacher/students' },
          { label: '作业布置', href: '/teacher/homework' },
          { label: '交流中心', href: '/teacher/messages' },
          { label: '通知管理', href: '/teacher/notices' },
        ];
      case UserRole.ADMIN:
        return [
          { label: '用户管理', href: '/admin/users' },
          { label: '班级管理', href: '/admin/classes' },
          { label: '学生管理', href: '/admin/students' },
          { label: '奖惩管理', href: '/admin/awards' },
          { 
            label: '信息发布',
            href: '/admin/publications',
            children: [
              { label: '通知管理', href: '/admin/publications/notices' },
              { label: '公告管理', href: '/admin/publications/announcements' },
              { label: '新闻管理', href: '/admin/publications/news' },
            ]
          },
          { label: '学校信息', href: '/admin/school' },
          { label: '系统设置', href: '/admin/settings' },
        ];
      default:
        return [];
    }
  };

  const handleLogout = () => {
    logout();
    router.push('/auth/login');
  };

  if (!user) {
    return <>{children}</>;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center">
            <Sidebar />
            <h1 className="text-2xl font-bold text-gray-900">家校通系统</h1>
            <AdminNav items={getNavItems()} />
          </div>

          <div className="flex items-center">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center space-x-2">
                  <Avatar>
                    <AvatarImage src={user.avatar} alt={user.name} />
                    <AvatarFallback>{user.name[0]}</AvatarFallback>
                  </Avatar>
                  <span className="hidden md:inline">{user.name}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={handleLogout}>
                  退出登录
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        {children}
      </main>
    </div>
  );
} 